import React from "react";
import type { MouseEvent } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const a = "react";
  const fn = (
    event: MouseEvent<HTMLButtonElement>,
    name: string,
    key: string,
  ) => {
    event.preventDefault();
    list.push({
      username: name,
      name: key,
    });

    console.log("click", list);
  };

  console.log(a);
  const flag: boolean = true;
  const HelloHanlde = () => {
    if (flag === true) return <p>你好1</p>;
    else return <p>hello1</p>;
  };
  const list = [
    { username: "张三", name: "zhangsan" },
    { username: "张三1", name: "zhangsan1" },
    { username: "张三2", name: "zhangsan2" },
  ];

  return (
    <div className="App">
      <header className="App-header">
        {/*注释写法 */}
        <img src={logo} className="App-logo" alt="logo" />
        <p style={{ color: "red", backgroundColor: "blue" }}>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <input type="text" id="label" />
        <div>{flag ? <p>hello </p> : <p>你好</p>}</div>
        <ul>
          {list.map((user) => {
            return <li key={user.name}>{user.username}</li>;
          })}
        </ul>
        <div>
          <HelloHanlde></HelloHanlde>
        </div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

      <div style={{ backgroundColor: "red" }}>
        <button
          onClick={(event) => {
            fn(event, "hello", "key");
          }}
        >
          点击
        </button>
      </div>
    </div>
  );
}

export default App;
